<template>
  <div>
    <a-card :title="title" style="width: 300px">
      <template #extra>
        <heart-outlined
          @click="clickStar"
          :style="star == true ? 'color:red' : ''"
      /></template>
      <p>{{ content }}</p>
    </a-card>
    <div>
      <p>插槽：</p>
      <slot></slot>
    </div>
  </div>
</template>

<script>
import { HeartOutlined } from "@ant-design/icons-vue";
export default {
  components: {
    HeartOutlined,
  },
  emits: ["iLikeThis"],
  props: {
    title: String,
    content: String,
    index: Number,
    star: Boolean,
  },
  methods: {
    clickStar() {
      this.$emit("iLikeThis", this.index);
    },
  },
};
</script>

<style></style>
